<template>
  <div class="home-container">
    <!--首页的正常显示-->
    <div v-if="isReady">
      <!--iconList-->
      <div class="nav-wrap" style="position:static;">
        <ul class="nav-list">
          <li @click="getCluePage()">
            <img src="../assets/images/xiansuo.png" alt=""/>
            <div>线索</div>
          </li>
          <li @click="getBusinessPage()">
            <img src="../assets/images/shangji.png" alt=""/>
            <div>商机</div>
          </li>
          <li>
            <img src="../assets/images/gonghai.png" alt=""/>
            <div>线索池</div>
          </li>
          <li>
            <img src="../assets/images/pool.png" alt=""/>
            <div>公海</div>
          </li>
          <li>
            <img src="../assets/images/chachong.png" alt=""/>
            <div>查重</div>
          </li>
          <li @click="getCustomerPage()">
            <img src="../assets/images/kehu.png" alt=""/>
            <div>客户</div>
          </li>
          <li>
            <img src="../assets/images/hetong.png" alt=""/>

            <div>合同</div>
          </li>
          <li>
            <img src="../assets/images/huikuan.png" alt=""/>
            <div>回款</div>
          </li>
          <li>
            <img src="../assets/images/fapiao.png" alt=""/>
            <div>发票</div>
          </li>
          <li>
            <img src="../assets/images/fapiao.png" alt=""/>
            <div>目标</div>
          </li>
          <li>
            <img src="../assets/images/add.png" alt=""/>
            <div>新增</div>
          </li>
        </ul>
      </div>
      <!--待办事项-->
      <div v-if="isReady">
        <div class="todo-wrap" v-if="todo.newClue.length>0 || todo.clueRetrieve.length>0 ||  todo.businessRetrieve.length>0">
          <div class="todo" v-if="todo.newClue.length>0">
            <div class="todo-header">
              <span class="todo-hd-2">你有新线索需要处理</span>
              <i class="mint-toast-icon mintui mintui-more"></i>
            </div>
            <ul class="todo-list">
              <li v-for="item in todo.newClue" :key="item.pid">{{item.customName}}</li>
            </ul>
          </div>
          <div class="todo" v-if="todo.clueRetrieve.length>0">
            <div class="todo-header">
              <span class="todo-hd-3">你有线索即将被收回</span>
              <i class="mint-toast-icon mintui mintui-more"></i>
            </div>
            <ul class="todo-list">
              <li v-for="item in todo.clueRetrieve" :key="item.pid">{{item.customName}}</li>
            </ul>
          </div>
          <div class="todo" v-if="todo.businessRetrieve.length>0">
            <div class="todo-header">
              <span class="todo-hd-4">你有商机即将被收回</span>
              <i class="mint-toast-icon mintui mintui-more"></i>
            </div>
            <ul class="todo-list">
              <li v-for="item in todo.businessRetrieve" :key="item.pid">{{item.customName}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {GetClueList, GetBusinessList} from '@/services/common.service'
export default {
  name: 'Home',
  data () {
    return {
      isReady: true,
      limit: 3,
      offset: 0,
      orderby: 'createTime',
      direction: 'DESC',
      todo: {newClue: [], clueRetrieve: [], businessRetrieve: []}
    }
  },
  watch: {},
  created () {
    this.homeInit()
  },
  methods: {
    homeInit () {
      this.getNewClue()
      this.getClueRetrieve()
      this.getBusinessRetrieve()
    },
    getNewClue () {
      let param = {dealUserIds: [window.getLocalStorage('userId')], clueStatus: 7}
      GetClueList(this.limit, this.offset, this.orderby, this.direction, param).then((res) => {
        this.todo.newClue = res.datas
      })
    },
    getClueRetrieve () {
      let param = {dealUserIds: [window.getLocalStorage('userId')], clueStatus: 3}
      GetClueList(this.limit, this.offset, this.orderby, this.direction, param).then((res) => {
        this.todo.clueRetrieve = res.datas
      })
    },
    getBusinessRetrieve () {
      let param = {userIds: [window.getLocalStorage('userId')], salePeriodId: 8}
      GetBusinessList(this.limit, this.offset, this.orderby, this.direction, param).then((res) => {
        this.todo.businessRetrieve = res.datas
      })
    },
    getCluePage () {
      this.$router.push('/clueIndex')
    },
    getBusinessPage () {
      this.$router.push('/businessIndex')
    },
    getCustomerPage () {
      this.$router.push('/customerIndex')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .home-container
    width 100%
    height 100%
    position absolute
    top 0px
    left 0px
    background url('../assets/images/screen.jpg') no-repeat
    background-size cover
    z-index 2
  .nav-list
    overflow: hidden
    li
      list-style:none
      width: 20%
      float: left
      text-align: center
      margin-top: 20px
      img
        width: 44px
        height: auto
        margin-bottom: 10px
        display: none
      img:first-child
        display: inline
      div
        color: #fff
        font-size: 12px
  .todo-wrap
    position relative
    margin-top 20px
    margin-bottom 130px
    font-size: 14px
  .todo
    margin 10px 15px
    padding 10px
    background #fff
    border-radius 4px
  .todo-header
    border-bottom 1px solid #f2f2f2
    padding 10px 0
    margin-left -10px
    margin-right -9px
  .todo-header span
    border-left 5px solid
    display inline-block
    height 22px
    font-size 16px
    color #1AB394
    line-height 22px
    text-indent 10px
  .todo-header span.todo-hd-1
    border-left-color #1ab394
    color #1ab394
  .todo-header span.todo-hd-2
    border-left-color #1c84c6
    color #1c84c6
  .todo-header span.todo-hd-3
    border-left-color #23c6c8
    color #23c6c8
  .todo-header span.todo-hd-4
    border-left-color #ec4758
    color #ec4758
  .todo-header span.todo-hd-5
    border-left-color #f8ac59
    color #f8ac59
  .todo-header i
    float right
    color #666
  .todo-list li
    height 35px
    line-height 35px
  .todo-list li + li
    border-top 1px solid #f2f2f2
</style>
